<template>
	<div class="playerinformation">
		<!-- 查询职工请假信息 -->
		<el-form label-width="80px" class="searchform">
		  <el-form-item label="职工编号:">
		    <el-input v-model="search_positionId" placeholder="请输入职工编号"></el-input>
		  </el-form-item>
		  <el-form-item label="请假日期">
				<el-col :span="11">
				<el-form-item prop="date1">
					<el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="search_requestDate" style="width: 200px;"></el-date-picker>
				</el-form-item>
				</el-col>
			</el-form-item>
		</el-form>
		<el-button type="primary" @click="search()">查询</el-button>
		<el-button type="warning" @click="clear()">清空</el-button>
		<el-button type="success" @click="isAdd()" style="float: right; margin-right: 40px;">添加</el-button>
		<!-- 职工请假信息表格数据 -->
		<el-table :data="tableData" stripe="" border fit style="width: 100%" :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">
			<el-table-column fixed  type="index" label="序号">
				<template scope="scope"><span>{{scope.$index+(pageNum - 1) * pageSize + 1}} </span></template>
			</el-table-column>
			<el-table-column prop="id" label="记录编号"></el-table-column>
			<el-table-column prop="positionId" label="职工编号"></el-table-column>
			<el-table-column prop="positionName" label="姓名"></el-table-column>
			<el-table-column prop="positionPhone" label="手机"></el-table-column>
			<el-table-column prop="requestReason" label="请假原因"></el-table-column>
			<el-table-column prop="requestDate" label="请假日期"></el-table-column>
			<el-table-column prop="requestDay" label="请假时长/天"></el-table-column>
			<el-table-column prop="backDayDate" label="返工日期"></el-table-column>
			<el-table-column fixed="right" align="center" label="操作">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="edit(scope.row)" icon="el-icon-edit" circle>编辑</el-button>
					<el-button type="text" size="small" @click="del(scope.row)" icon="el-icon-delete" circle>删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<div style="text-align:right;">
			<el-pagination background layout="prev, pager, next" :total="pages" :current-page="pageNum" @current-change="changePageNum"></el-pagination>
		</div>
		<!-- 添加（编辑）职工请假信息 -->
		<el-dialog :title="titleMsg" :visible.sync="dialogFormVisible" width="400px">
			<el-form :model="formData" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="职工编号" prop="positionId">
					<el-input v-model="formData.positionId"></el-input>
				</el-form-item>
				<el-form-item label="请假原因" prop="requestReason">
					<el-input v-model="formData.requestReason"></el-input>
				</el-form-item>
				<el-form-item label="请假时长" prop="requestDay">
					<el-input v-model="formData.requestDay"></el-input>
				</el-form-item>
				<el-form-item label="请假时间" required>
					<el-col :span="11">
						<el-form-item prop="requestDate">
							<el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="formData.requestDate" style="width: 200px;"></el-date-picker>
						</el-form-item>
					</el-col>
				</el-form-item>
				<el-form-item v-if="isShowBack" label="返工时间">
					<el-col :span="11">
						<el-form-item prop="backDate">
							<el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="formData.backDayDate" style="width: 200px;"></el-date-picker>
						</el-form-item>
					</el-col>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('ruleForm')">{{buttonMsg}}</el-button>
					<el-button @click="cancleForm()">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	export default{
		name:"LeaveList",
		data(){
			return{
				search_positionId:'',
				search_requestDate:'',
				pages:0,
				pageNum:1,
				pageSize:2,
				titleMsg:'',
				buttonMsg:'',
				formData: {},
				tableData: [],
				ruleForm: {
					positionId: '',
					requestReason: '',
					requestDay: '',
					requestDate: '',
				},
				rules: {
					positionId: 
						[
							{ required: true, message: '请输入职工编号', trigger: 'blur' }
						],
					requestReason: 
						[
							{ required: true, message: '请输入请假原因', trigger: 'blur' }
						],
					requestDay: 
						[
							{ required: true, message: '请输入请假时长', trigger: 'blur' }
						],
					requestDate: 
						[
							{ required: true, message: '请选择请假日期', trigger: 'change' }
						],
				},
				//弹出添加表单
				dialogFormVisible: false,
				isShowBack:false,
				formLabelWidth: '120px',
			}
		},
		methods:{
			search(){												//实现表格数据显示
				const data = {
					pageNum : this.pageNum,
					pageSize : this.pageSize,
					positionId : this.search_positionId,
					requestDate : this.search_requestDate
				};
				let that = this;
				this.$axios.post(that.$global.zuulIp+"/position/getRequestHolidayPageInfo",data).then((response)=>{
					that.tableData = response.data.list;
					for(let i = 0;i < that.tableData.length;i++){
						if(that.tableData[i].backDayDate== null){
							that.tableData[i].backDayDate = '暂未返工';
						}
					}
					that.pages = parseInt(response.data.pages)*10;
				}).catch((response)=>{
					console.log(response);
				})
			},
			changePageNum(currentPage){								//改变页数
				this.pageNum = currentPage;
				this.search();
			},
			clear(){												//清空查询条件
				this.search_positionId = "";
				this.search_requestDate = "";
			},
			isAdd(){												//添加按钮触发事件
				this.buttonMsg = '添加';
				this.titleMsg = '添加职工请假信息';
				this.formData = {};
				this.dialogFormVisible = true;
			},
			edit(row){												//编辑时获取职工请假信息
				let that = this;
				this.$axios.get(that.$global.zuulIp+"/position/getRequestHolidayById?id="+row.id).then((response)=>{
					that.formData = response.data;
				}).catch((response)=>{
					console.log(response);
				});
				this.buttonMsg = '修改';
				this.titleMsg = '编辑职工请假信息';
				this.isShowBack=true;
				this.dialogFormVisible = true;
			},
			submitForm(formName) {									//添加（编辑）表单数据提交
				let that = this;
				let msg = '';
				this.$refs[formName].validate((valid) => {
				if (valid) {
					if(this.buttonMsg == '添加')
					{
						this.$axios.post(that.$global.zuulIp+"/position/addRequestHoliday",that.formData).then((response)=>{
							if(response.data>0){
								msg = '添加成功!';
							}else{
								msg = '添加失败!';
							}
							that.$alert(msg,{
								confirmButtonText: '确定'
							}).then(()=>{
								that.search();
								that.dialogFormVisible = false;
							})
						}).catch((response)=>{
							console.log(response);
						});
					}else if(this.buttonMsg == '修改'){
						this.$axios.post(that.$global.zuulIp+"/position/modRequestHoliday",that.formData).then((response)=>{
							console.log(that.formData.backDayDate);
							if(response.data>0){
								msg = '修改成功!';
							}else{
								msg = '修改失败!';
							}
							that.$alert(msg,{
								confirmButtonText: '确定'
							}).then(()=>{
								that.search();
								that.dialogFormVisible = false;
							})
						}).catch((response)=>{
							console.log(response);
						});
					}
				} else {
					console.log('error submit!!');
					return false;
				}
				});
      		},
			cancleForm(){											//取消按钮触发事件
				this.dialogFormVisible = false;
			},
			del(row){												//删除职工请假信息
				let that = this;
				this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
					}).then(() => {
						that.$axios.get(that.$global.zuulIp+"/position/delRequestHoliday?id="+row.id).then((response)=>{
							if(response.data>0){
								that.$message({
									type: 'success',
									message: '删除成功!'
								});
							}else{
								that.$message({
									type: 'error',
									message: '删除失败,请联系管理员!'
								});
							}
							that.search();
						}).catch((response)=>{
							console.log(response);
						})
					}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});          
				});
			},
			
		},
		mounted:function(){
			this.search();
		}
	}
</script>

<style scoped="scoped">
	.searchform{
	  display: flex;
	  float: left;
	}
	.playerinformation .el-button{
		margin-left: 15px;
	}
</style>
